<template>
  <el-form :model="formDatas" inline class="formComponents">
    <el-row :gutter="20">
    <template v-for="item in formDatas" :key="item.label">
      
    <el-col :span="item.type === 'date'?12:6">
      <el-form-item :label="item.label" label-width="100px">
        <el-cascader
          v-model="item.value"
          :options="options"
          v-if="item.type === 'cascader'"
          clearable
          
        />
        <!-- clearable -->
        <el-input
          v-if="item.type === 'input'"
          v-model="item.value"
          :value="item.value"
          :placeholder="item.placeholder"
        />
        <el-select
          v-if="item.type === 'select'"
          clearable
          v-model="item.value"
          :placeholder="item.placeholder"
          @change="changeOrgId(item.eName)"
        >
          <el-option
            :label="option.name || option.roleName||option.employeeName"
            :value="option.id"
            v-for="option in item.options()"
            :key="option.id"
          >
          
          <span class="ellips" :title="option.name || option.roleName||option.employeeName">{{ option.name || option.roleName||option.employeeName }}</span>
          </el-option>
        </el-select>
        <el-select
          v-if="item.type === 'selectson'"
          v-model="item.value"
          :placeholder="item.placeholder"
        >
          <el-option
            :label="option.name || option.roleName||option.employeeName"
            :value="option.id"
            v-for="option in item.options()"
            :key="option.id"
          />
        </el-select>
        <!-- 日期段 -->
        <!-- <el-col :span="12"> -->
        <el-date-picker
          v-if="item.type === 'date'"
          v-model="item.value"
          type="datetimerange"
          range-separator="～"
          start-placeholder="开始"
          end-placeholder="结束"
          value-format="YYYY-MM-DD HH:mm:ss"
          :default-time="defaultTime"
        />
      <!-- </el-col> -->
      </el-form-item>
    </el-col>
    
    </template>
    <slot>
      
    </slot>
  </el-row>
  </el-form>
</template>

<script lang="ts" setup>
import { watch, reactive, ref } from 'vue';
import regionData from '@/assets/json/regionData.json';
// import { roleOptionsRequest } from '@/api/common';
const emits = defineEmits(['handleFormValue']);
const defaultTime: [Date, Date] = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
]
const datas = defineProps({
  formDatas: {
    type: Array as any,
    required: true
  }
});
// let showOrgs = ref(true)
//  组织机构变化-》获取归属枚举值
const changeOrgId = async (e) => {
  datas.formDatas.forEach((d: { value: any[]; type: string; keys: (string | number)[]; eName: string | number; }) => {
    // if (d.value||d.value===0) {
      if (d.type === 'selectson' && e === 'orgId') {
        d.value=null
        return;
      }
    // }
  });
  
}
const obj = {};
const options = ref(regionData);
let chanFormValue = reactive(obj);
watch(datas, async() => {
  datas.formDatas.forEach((d: { value: any[]; type: string; keys: (string | number)[]; eName: string | number; }) => {
    if (d.value||d.value===0) {
      if (d.type === 'cascader') {
        d.keys.forEach((item: string | number, i: number) => {
          obj[item] = d.value[i];
        });
        return;
      }else if(d.type==='date'){
        obj['startCreateTime'] = d.value[0];
        obj['endCreateTime'] = d.value[1];
        return
      }
      obj[d.eName] = d.value;
    }else{
      delete  obj[d.eName]
      if (d.type==='date' && !d.value) {
        delete obj['startCreateTime']
        delete obj['endCreateTime']
      }
    }
  });
  emits('handleFormValue', chanFormValue);
},{deep:true});
</script>

<style lang="scss">
.formComponents {
  .el-form-item__content {
    width: 170px;
  }
}
</style>
<style lang="scss" scope> 
.ellips {
  float: left;width: 200px;overflow: hidden;text-overflow:ellipsis; white-space: nowrap;
} 
</style>
